<template>


	<view>
		<navbar title-text="" :isHeight="false" :isWhite="true" background="none" @navBarAttached="onNavBarAttached" />
		<view style="position: relative;">
			<image
				:src="hospital.avatar_url"
				mode="aspectFill"
				style="filter: blur(50rpx) brightness(0.8); display: block; width: 100%; height: 550rpx; overflow: hidden"
			></image>
			<view :style="'position:absolute;top:' + navBarHeight + 'rpx;padding-top:65rpx;overflow:hidden;width:100%;'">
				<view class="hospital-hd">
					<view class="weui-cell weui-cell_access" hover-class="weui-cell_active" @tap="showShareModal">
						<view class="weui-cell__hd">
							<image
								:src="hospital.avatar_url"
								mode="aspectFill"
								style="position: absolute; top: 34rpx; display: block; width: 150rpx; height: 135rpx; border-radius: 10rpx; overflow: hidden"
							></image>
						</view>
						<view class="weui-cell__bd" style="">
							<view style="position: absolute; top: 34rpx">
								<text style="font-size: 36rpx; color: #ffffff; font-weight: bold ;">{{ hospital.name }}</text>
							</view>
							<view>
								<text class="hosp-rank">{{ hospital.rank }}</text>
								<text class="hosp-label">{{ hospital.label }}</text>
							</view>
						</view>
						<view class="weui-cell__ft weui-cell__ft_in-access"><text class="f4">转发 ></text></view>
					</view>
					<view class="weui-cell weui-cell_access" hover-class="weui-cell_active" @tap="toMap">
						<view class="weui-cell__hd">
							<image
								src="/static/resource/images/ic_address.png"
								mode="aspectFill"
								style="margin-right: 10rpx; display: block; width: 40rpx; height: 40rpx"
							></image>
						</view>
						<view class="weui-cell__bd" >
							<view>
								<text style="font-size: 24rpx;margin-right: 50rpx;" >{{ hospital.city }}{{ hospital.district }}{{ hospital.address }}</text>
							</view>
						</view>
						<view class="weui-cell__ft weui-cell__ft_in-access"><text class="f4" >导航 ></text></view>
					</view>
				</view>
				<view class="hospital-bd">
					<view class="weui-cells serv-list">
						<view class="weui-cell serv-item">
							<view class="weui-cell__bd">
								<view style="padding-top: 10rpx"><text class="serv-name">在线预约您需要的服务</text></view>
							</view>
							<view class="weui-cell__ft"></view>
						</view>
						<view class="weui-cell serv-item" @tap="toService" :data-svid="item.id" v-for="(item, index) in services" :key="index">
							<block v-if="item.use_switch == 1">
								<view class="weui-cell__hd">
									<image class="serv-logo" :src="item.logo_image ? item.logo_image_url : '../../resource/images/avatar.jpg'" mode="aspectFill" />
								</view>
								
								<view class="weui-cell__bd">
									<view>
										<text class="serv-name" >{{ item.name }}</text>
									</view>
									<view class="serv-line serv-intro">{{ item.intro }}</view>
									<view class="serv-line">
										<text class="serv-price">{{ item.price }}</text>
										<text class="serv-unit">元/次</text>
									</view>
								</view>
								
								<view class="weui-cell__ft">
									<button size="mini" type="default" @click="toServer"
										style="color:#ffffff;backgroundColor:#0bb585;borderColor:#0bb585"
										hover-class="is-hover">预约</button>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<share :shareModal="clone_shareModal"></share>
	</view>
</template>

<script setup>
	import { ref, toRaw } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import request from '../../common/utils/request';
	 const hospital=ref({})
	 const navBarHeight=ref({})
	 const services=ref([]) 
	 // 目标纬度  必填
	 const latitude=ref()
	 // 目标经度  必填
	const longitude=ref()
	 // 目标地址名称
	const name=ref()
	 // 目标地址详细信息
	const address=ref()
	 const op=ref()
	 //分享状态
	 const clone_shareModal=ref(false)
	 onLoad((params)=>{
			op.value=params
			console.log(params,"99999999999999999999999");
		request.request("/Hospital/index","GET",{hid:params.hid}).then(res=>{
			hospital.value=res.data.hospital
			services.value=res.data.services
		})
	 })
	 const onNavBarAttached=(e)=>{
		 navBarHeight.value=e.detail.navBarHeight
	 }
	 const showShareModal=()=>{
		 clone_shareModal.value=true
	 }
	//导航
	const toMap=()=>{
		// 获取定位信息
		uni.getLocation({
			type: 'wgs84', //返回可以用于uni.openLocation的经纬度
			// 用户允许获取定位
			success: function(res) {
				console.log(res, '经纬度===>')
				
				const key ='f226f42b34e1da78f468b0dcad0cf41a'
				if (res.errMsg == "getLocation:ok") {
					console.log(latitude)
					console.log(longitude)
					uni.openLocation({
							
						// 传入你要去的经度
						longitude:Number( hospital.lng),
						// 传入你要去的纬度
						latitude: Number(hospital.lat),
						// 传入你要去的地址信息 不填则为空
						address: hospital.address,
						// 缩放大小
						scale: 18,
						success: function() {
						loadCity(longitude,latitude,key)
						}
						
					});
				}
			},
			// 用户拒绝获取定位后 再次点击触发
			fail: function(res) {
				console.log(res)
				if (res.errMsg == "getLocation:fail auth deny") {
					uni.showModal({
						content: '检测到您没打开获取信息功能权限，是否去设置打开？',
						confirmText: "确认",
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								uni.openSetting({
									success: (res) => {
										console.log('确定');
									}
								})
							} else {
								console.log('取消');
								return false;
							}
						}
					})
				}
			}
		});
	}
	
	
	//预约
	const toServer=(e)=>{
		console.log(e);
		// uni.navigateTo({
		// 	url:'/pages/service/index?hid='+JSON.stringify(op.value)
		// })
	}
	
 const	loadCity=(longitude, latitude,key)=> {//url中规则是经度在前，纬度在后
								uni.request({
									header: {
										'Content-Type': 'application/text',
									},
									//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
									url: `https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${latitude},${longitude}&key=${key}&radius=1000&extensions=all`,
									success(res) {
									console.log(res,"获取位置成功信息")
									},
									fail(err) {
										console.log(err,"获取位置失败信息")
									}
								})
							}
	        
	
</script>

<style lang="scss">
page {
    background: #f4f4f4;
}
.f4{
	color: #999999;
	font-weight: bold;
	font-size: 24rpx;
}
.hospital-hd {
    margin: 20rpx 20rpx 0 20rpx;
    background: #ffffff;
    border-radius: 10rpx;
	
}
.hospital-hd .weui-cell {
    padding: 20rpx;
}

.hospital-bd {
    margin: 20rpx 20rpx 0 20rpx;
    background: #ffffff;
    border-radius: 10rpx;
}
.hospital-bd .weui-cells {
    margin-top: 0;
}
.hospital-bd .weui-cell {
    padding: 20rpx;
}

.hospital-ft {
    margin: 20rpx 20rpx 0 20rpx;
    background: #ffffff;
    border-radius: 10rpx;
}
.hospital-ft .weui-cell {
    padding: 20rpx;
}

.hosp-rank {
    font-size: 26rpx;
    font-weight: bold;
    color: #0bb585;
    margin-right: 15rpx;
}
.btn1m{
	background-color: #0bb585;
}
.hosp-label {
    font-size: 26rpx;
    font-weight: bold;
    color: #0ca7ae;
    margin-right: 15rpx;
}

.serv-list {
    margin: 0;
    background: none;
}
.serv-list::before {
    display: none;
}
.serv-list::after {
    display: none;
}

.serv-item {
    padding: 20rpx;
    background: #ffffff;
    border-radius: 10rpx;
    overflow: hidden;
	display: flex;
	justify-content: space-around;
}
.serv-item::before {
    display: none;
}
.serv-item::after {
    display: none;
}
.serv-name {
    font-weight: bold;
    font-size: 34rpx;
}
.serv-logo {
    display: block;
    width: 150rpx;
    height: 150rpx;
    border-radius: 10rpx;
    overflow: hidden;
    margin-right: 20rpx;
}
.serv-line {
    margin-top: 8rpx;
}
.serv-line text {
    font-size: 26rpx;
}
.serv-rank {
    font-weight: bold;
    color: #0bb585;
    margin-right: 15rpx;
}
.serv-label {
    font-weight: bold;
    color: #0ca7ae;
    margin-right: 15rpx;
}
.serv-intro {
    font-size: 26rpx;
    color: #999999;
    width: 350rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.serv-price {
    font-size: 34rpx !important;
    font-weight: bold;
    color: #0bb684;
}
.serv-unit {
    color: #0bb684;
}
.weui-cell_access{
	display: flex !important;
	justify-content: space-between !important;
}

</style>
